<template>
  <section class="namespace-panel-master-tab">
    <header class="panel-heading">
      <el-row class="first-panel-heading">
        <el-col :span="12" class="before" style="padding-bottom: 5px;">
          <b>development</b>
        </el-col>
        <el-col :span="12" class="after">
          <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="bottom">
            <el-button type="prime" size="small" class="btn_default">发布</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="bottom">
            <el-button type="prime" size="small" class="btn_default">回滚</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="bottom">
            <el-button type="prime" size="small" class="btn_default">发布历史</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="bottom">
            <el-button type="prime" size="small" class="btn_default">授权</el-button>
          </el-tooltip>
        </el-col>
      </el-row>
    </header>
    <div class="panel-views">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="表格" name="first">
          <div class="panel panel-default">
            <div class="panel-heading">
              <el-row>
                <el-col :span="8" style="padding-top:6px;">
                  覆盖的配置
                </el-col>
                <el-col :span="16">
                  <el-input v-model="setInput" placeholder="filter by key ..."></el-input>
                </el-col>
              </el-row>
            </div>
            <el-table :data="tableData" border style="width: 100%" row-class-name="row-style" header-row-class-name="header-row-style">
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="文本" name="second">
          <editor v-model="seniorData" :options="options" rows="10" @init="editorInit" readonly="true" lang="java" theme="eclipse" width="100%"
            height="150"></editor>
        </el-tab-pane>
        <el-tab-pane label="更改历史" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="实例列表" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </div>
  </section>
</template>

<script>
  export default {
    components: {
      editor: require('vue2-ace-editor')
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        activeName: '',
        setInput: '',
        seniorData: "12321321312\n12321",
        options: {
          readOnly: true,
          selectionStyle:"text",
          highlightActiveLine:true,
          minLines:20,
        }
      }
    },
    methods: {
      handleClick() {

      },
      editorInit() {
        require("brace/mode/java");
        require("brace/theme/eclipse");
        require("brace/ext/emmet");
        require("brace/ext/language_tools");
      }
    }
  }

</script>

<style lang="scss">
  .namespace-panel-master-tab {
    .panel-heading {
      display: block;
      border-color: #eff2f7;
      font-size: 16px;
      font-weight: 300;
      padding: 10px 15px;
      border-bottom: 1px solid transparent;
      border-bottom-color: transparent;
      border-top-right-radius: 3px;
      border-top-left-radius: 3px;
      .first-panel-heading {
        .before {
          b {
            font-size: 18px;
            font-weight: bold;
          }
        }
        .after {
          float: left;
          text-align: right;
        }
      }
    }
    .panel-views {
      .el-tabs__nav-wrap {
        padding: 10px 15px 0px 15px;
        text-align: center;
      }
      .el-tabs__item {
        min-width: 80px;
        box-sizing: content-box;
      }
      .panel {
        border: 1px solid #ddd;
        border-radius: 0;
        margin-bottom: 20px;
        background-color: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        .panel-heading {
          font-size: 16px;
          font-weight: 300;
          background-color: #f5f5f5;
          border-color: #ddd;
          padding: 10px 15px;
          border-bottom: 1px solid transparent;
          border-bottom-color: transparent;
          border-top-right-radius: 3px;
          border-top-left-radius: 3px;
          color: #797979;
          .el-input__inner {
            width: 165px;
            height: 34px;
            background: #f5f5f5;
            float: right;
            &:focus {
              border-color: #66afe9;
              outline: 0;
              -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
              box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
            }
          }
        }
        .el-table {
          border: 1px solid #DDDDDD;
          color: #000000;
          .header-row-style {
            th {
              color: #000000;
              border-right: 1px solid #DDDDDD;
              border-bottom: 1px solid #DDDDDD;
            }
          }
          .row-style {
            td {
              border-right: 1px solid #DDDDDD;
              border-bottom: 1px solid #DDDDDD;
            }
          }
        }
      }
      .el-tabs {
        .el-tabs__content {
          .el-tab-pane {
            border: 1px solid #ccc;
          }
        }
      }
    }
  }

</style>
